<template>
  <u-swiper
    v-show="!globalStore.releaseShowIf"
    :list="carouselImgInfo"
    :effect3d="true"
    height="400"
    img-mode="aspectFill"
    border-radius="10"
  ></u-swiper>
  <u-tabs
    v-model="currentPage"
    name="cate_name"
    count="cate_count"
    :list="list"
    :is-scroll="false"
    @change="change"
  ></u-tabs>
  <u-tabs
    v-model="currentPage"
    name="cate_name"
    count="cate_count"
    :list="dynamicList"
    :is-scroll="false"
    @change="change"
  ></u-tabs>
  <content
    v-if="!ifChange"
    :currentTag="currentTag"
    :currentPage="currentPage"
  ></content>
  <content
    v-if="ifChange"
    :currentTag="currentTag"
    :currentPage="currentPage"
  ></content>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useGlobalStore } from '../../store'
import content from './content/content.vue'

const globalStore = useGlobalStore()

// ...其他代码不变...

// 假设传入的tags存储在globalStore.selectedTags中
const dynamicTags = ref(['iu', 'fy', 'lcy']) // 这个是原始的备选标签列表

const currentPage = ref<Number>(0)
const currentTag = ref<String>('')
const ifChange = ref(false)
function change(index) {
  ifChange.value = !ifChange.value
  currentPage.value = index
  currentTag.value = list.value[index].cate_name
}

interface carouselImgItem {
  colorClass: string
  url: string
  content: string
}
type carouselArrayType = carouselImgItem[]
const carouselImgInfo: carouselArrayType = ref([
  'https://s3.bmp.ovh/imgs/2022/10/08/17a031a0a10b0943.jpg',
  'https://s3.bmp.ovh/imgs/2022/10/08/fb987665cbb1f727.jpg',
  'https://s3.bmp.ovh/imgs/2022/10/08/d738f2ad4ecc6e6a.jpg',
  'https://s3.bmp.ovh/imgs/2022/10/08/c5c797cee0d817bf.jpg',
])
interface carouselInfo {
  indicatorDots: boolean
  autoplay: boolean
  interval: number
  duration: number
}
const indicatorDots = ref(true)
const autoplay = ref(true)
const interval = ref(2000)
const duration = ref(500)

const showIf: boolean = ref(true)

showIf.value = 11

const rawTags = ref<string[]>([]) // 假设这是传入的标签数组

const originalTags = ['iu', 'fy', 'lcy'] // 原始的备选标签列表

onMounted(() => {
  // 从本地存储中获取选中的标签
  const tags = uni.getStorageSync('selectedTags') || []
  // 如果tags包含'all'，保持其在数组首位
  if (tags.includes('all')) {
    tags.unshift(tags.splice(tags.indexOf('all'), 1)[0])
  }
  // 更新全局状态中的标签
  globalStore.selectedTags = tags
  // 更新动态标签数组，以触发重新计算
  dynamicTags.value = tags.length ? tags : originalTags
})

// 这是一个计算属性，用于根据传入的标签动态生成标签列表
const list = computed(() => {
  const inputTags = globalStore.selectedTags
  let tagsToShow = ['all'] // 'all'始终显示

  if (inputTags.length > 0) {
    // 移除'all'，然后取最多三个标签
    tagsToShow = tagsToShow.concat(
      inputTags.filter((t) => t !== 'all').slice(0, 3),
    )
  }

  if (tagsToShow.length < 4) {
    // 如果不足四个(包含'all')，从原始标签中补足
    const additionalTags = originalTags.filter(
      (tag) => !tagsToShow.includes(tag),
    )
    tagsToShow = tagsToShow.concat(additionalTags).slice(0, 4)
  }

  // 如果传入的标签多于三个，且包含原始标签，优先展示这些标签
  if (
    inputTags.length >= 3 &&
    originalTags.every((tag) => inputTags.includes(tag))
  ) {
    tagsToShow = ['all'].concat(originalTags)
  } else if (inputTags.length > 3) {
    // 如果大于三个且不包含所有原始标签，随机抽取
    const shuffledTags = inputTags.sort(() => 0.5 - Math.random())
    tagsToShow = ['all'].concat(shuffledTags.slice(0, 3))
  }

  return tagsToShow.map((tag) => ({ cate_name: tag }))
})
</script>

<style lang="scss">
.container {
  // background: black;
  color: #ffffff;
}
</style>
